<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>处方划价</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <style>
        .nam{
            width: 80px;
            font-size:16px;
            color: #737383;
            padding-left: 20px;
        }
        .sbb{
            width: 150px;
            text-align: center;
        }
        #repi{
            margin-top:60px;
            margin-left: 60px;
            height: 400px;
        }
        #pay{
            text-align: center;
            font-size: 16px;
            color: #737383;
            margin-top: 10px;
        }
        .inp{
            border: #CCCCCC solid 1px;
            height: 35px;
            border-radius: 3px;
            width: 200px;
        }
        #tibu{
            width: 100px;
            background-color:rgb(1,150,136);
            border: 0px;
            border-radius: 3px;
            margin-right: 20px;
            height: 30px;
            font-size: 14px;
            color: white;
            cursor: pointer;
        }
        #qubu{
            width: 100px;
            background-color:#CCCCCC;
            border: 0px;
            border-radius: 3px;
            margin-left: 20px;
            height: 30px;
            font-size: 14px;
            cursor: pointer;
        }
        #selinp1{
            width: 200px;
            height: 40px;
            border:solid #CCCCCC 1px;
            border-radius: 2px;
            margin-left: 20px;
        }
        #selbut1{
            width: 100px;
            height: 40px;
            background-color:rgb(1,150,136);
            color: white;
            border: 0px;
            border-radius: 2px;
        }
    </style>
</head>

<body>
<!--头部显示信息开始-->
<div>
    <form class="layui-form" method="post" id="dataFrm">
        <table style="margin-top: 20px;margin-left: 30px;">
            <tr>
                <td class="nam">姓名:</td>
                <td class="valu">
                    <input id="reid" type="hidden" class="layui-input" readonly name="reportId"/>
                    <input id="rename" class="layui-input" type="text" readonly name="reportName"/> </td>
                <td class="nam">身份证号:</td>
                <td class="valu"><input id="carid" class="layui-input" type="text" readonly name="carid"/> </td>
                <td class="nam">性别:</td>
                <td class="valu"><input id="resex" class="layui-input" type="text" readonly/> </td>
                <td class="nam">年龄:</td>
                <td class="valu"><input id="age" class="layui-input" type="text" readonly/> </td>
                <td rowspan="2" class="sbb">
                    <input id="sbut" type="button" class="layui-btn layui-icon-add-circle-fine" value="开始收费">
                </td>
            </tr>
            <tr style="height: 10px"></tr>
            <tr style="height: 10px"></tr>
            <tr>
                <td class="nam">科室:</td>
                <td class="valu"><input class="layui-input" id="rede" type="text" readonly/> </td>
                <td class="nam">医生:</td>
                <td class="valu"><input class="layui-input" id="redo" type="text" readonly/> </td>
                <td class="nam">电话:</td>
                <td class="valu"><input class="layui-input"  id="phone" type="text" readonly/> </td>
                <td class="nam">挂号费:</td>
                <td class="valu"><input class="layui-input"  id="price" type="text" readonly/> </td>
                <td rowspan="3" class="sbb">
                    <input id="sbut2" type="button" class="layui-btn layui-icon-add-circle-fine" value="确认收费">
                </td>
        </table>
    </form>
</div>
<!--头部显示信息结束-->

<!--病号信息弹出层开始-->
<div style="display: none;padding-top: 20px" id="peopleimgeDiv" >
    <div id="adddrug1">
        <input type="text" placeholder="请输入你要查询的信息" id="selinp1" autocomplete="off" >
        <input type="button" id="selbut1" value="查询"/>
    </div>
    <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
    <div  id="userBar" style="display: none;">
        <a class="layui-btn layui-btn-xs" lay-event="edit">选择</a>
    </div>
</div>
<!--病号信息弹出层结束-->
<!--处方页面开始-->
<div id="repi">
    <table class="layui-hide" id="repiid" lay-filter="repiid"></table>
</div>
<!--处方页面结束-->
<!--添加药品数量开始-->
<div id="drugnum" style="text-align: center;display: none">
    <input type="number" id="num" style="height: 25px;width:200px;margin-top: 15px;" placeholder="请输入数量" autocomplete="off">
    <input type="hidden" id="kunum"><!--药品库存数量-->
    <input type="hidden" id="mename"><!--药品名字-->
    <input type="hidden" id="sellingPrice"><!--药品单价-->
    <span id="uni"></span><br/><br/><br/><br/>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="addru">提交</button>
    <button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh layui-icon-delete" id="clo" >取消</button>
</div>
<!--添加药品数量结束-->
<!--收费页面开始-->
<div id="pay" style="display: none">
    应收金额:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="money" readonly type="text" >元<br/><br/>
    已收金额:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="monee" type="number">元<br/><br/>
    应找零头:&nbsp;&nbsp;&nbsp;&nbsp;<input class="inp" id="moneee" readonly type="text">元<br/><br/><br/>
    <input id="tibu" type="button" value="提交"><input id="qubu" type="button" value="取消">
</div>
<!--收费页面结束-->
</body>
<script src="/static/layui/layui.js"></script>

<script type="text/javascript" th:inline="none">
    var tableIns;
    var hua;
    var xinagmu;
    var people;
    layui.use([ 'jquery', 'layer', 'form', 'table' ], function() {

        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        //查询患者信息表
        var mainIndex;
        $("#sbut").click(function(){
            mainIndex=layer.open({
                type:1,
                title:'选择病人',
                content:$("#peopleimgeDiv"),
                area:['1300px','500px'],
                success:function(index){
                    people=table.render({
                        elem: '#userTable'   //渲染的目标对象
                        ,url:'../caocc/selpreson' //数据接口
                        ,title: '用户数据表'//数据导出来的标题
                        ,cellMinWidth:200 //设置列的最小默认宽度
                        /*,parseData:function(res){
                             return{
                                 "code":0,//如果不用分页后台没有用分页设置code:0的话需要加上这句话
                                 data:res//要不然会报会报返回的数据类型不符合规范
                             }
                         }*/
                        ,page: 1  //是否启用分页, limits: [10, 20, 30]
                        ,limits: [5, 10, 15]
                        ,limit: 5//默认采用3
                        ,cols: [[   //列表数据
                            {field:'registerId', title:'单据号',align:'center',width:"8%"}
                            ,{field:'registerName', title:'姓名',align:'center',width:"8%"}
                            ,{field:'phone', title:'电话',align:'center',width:"8%"}
                            ,{field:'carid', title:'身份证号',align:'center',width:"8%"}
                            ,{field:'sex', title:'性别',align:'center',width:"8%"}
                            ,{field:'age', title:'年龄',align:'center',width:"8%"}
                            ,{field:'department', title:'科室',align:'center',width:"8%"}
                            ,{field:'doctorName', title:'医生',align:'center',width:"8%"}
                            ,{field:'type', title:'挂号类别',align:'center',width:"8%"}
                            ,{field:'time', title:'挂号时间',align:'center',width:"8%"}
                            ,{field:'price', title:'挂号费',align:'center',width:"8%"}
                            ,{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'8%'}
                        ]]
                    })
                }
            });
        });
        //监听患者行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'edit'){ //编辑
                $("#reid").val(data.registeredId)
                $("#rename").val(data.registerName)
                $("#resex").val(data.sex)
                $("#age").val(data.age)
                $("#rede").val(data.department);
                $("#redo").val(data.doctorName);
                $("#carid").val(data.carid);
                $("#phone").val(data.phone);
                $("#price").val(data.price);
                var perid=data.reportId;
                //查询该用户的处方
                layer.close(mainIndex)
                wareid=data.value;//获取选中的药房的id
                hua=table.render({
                    elem: '#repiid'   //渲染的目标对象
                    ,url:'../xpay/selxiang?perid='+perid //数据接口
                    ,title: '患者项目'
                    ,cellMinWidth:200 //设置列的最小默认宽度
                    ,page: 1  //是否启用分页, limits: [10, 20, 30]
                    ,limits: [5, 10, 15]
                    ,limit: 5//默认采用3
                    ,cols: [[   //列表    数据
                        {field:'name', title:'药品名称',align:'center',width:"20%"}
                        ,{field:'durgnum', title:'数量',align:'center',width:"20%"}
                        ,{field:'repiceprice', title:'单价',align:'center',width:"20%"}
                        ,{field:'repicetotal', title:'小计',align:'center',width:"20%"}
                        ,{fixed: 'right', title:'状态',align:'center',width:'20%',templet:function(d){
                                return d.ostate=='0'?'<font color=blue>非检查</font>':'<font color=red>需检查</font>';
                            }}
                    ]]
                })
            }
        });
        //打开收费页面
        $("#sbut2").click(function(){
            var reid=$("#reid").val();
            if(reid==''){
                layer.msg("请选择患者后在收费");
            }else{
                $.post("../xpay/selshoux",{"perid":reid},function(res){
                    if(res==0||res==''){
                            layer.msg("请添加收费项目");
                    }else{
                        mainIndex=layer.open({
                            type:1,
                            title:'确认收费',
                            content:$("#pay"),
                            area:['400px','350px']
                        })
                        $("#money").val(res);
                    }
                })
            }
        })
        //键盘点击事件
        document.onkeyup = function (e) {
            //alert("Key: "+event.keyCode)
            var y=$("#money").val();
            var j=$("#monee").val();
            var z=j-y;
            $("#moneee").val(z);
        }
        //提交收费
        $("#tibu").click(function(){
            var r=$("#monee").val();
            var z= $("#moneee").val();
            var reid=$("#reid").val();//获取用户id
            var price=$("#price").val();//获取挂号费
            if(z>=0 && r!=''){
                layer.msg("缴费成功");
                //修改用户状态变成已缴费
                $.post("../xpay/shoufei",{"perid":reid},function(res) {
                    //5秒后跳转也面
                    setTimeout(function(){
                        location.href="../xpay/xiangpay";
                    },1000)
                })
            }else{
                layer.msg("请缴费")
            }
        })
        //关闭缴费页面
        $("#qubu").click(function(){
            $("#money").val("");
            $("#monee").val("");
            $("#moneee").val("");
            layer.close(mainIndex)
        })
        //用户模糊查询
        $(document).on('click',"#selbut1",function(){
            var durgname=$("#selinp1").val()
            people.reload({
                url:"../caocc/mohu?durgname="+durgname
            })
        });
    })
</script>
</html>